<!--考勤巡查-->
<template>
  <div class="CheckInByHead">
    <!--头部bar开始-->
    <CommonBar :options="options"></CommonBar>
    <!--头部bar结束-->
    <!--表格-->
    <div class="countScoreHeader">
      <van-row>
        <van-col :span="12">保洁员姓名</van-col>

        <van-col :span="12" class="textcenter">操作</van-col>
      </van-row>
    </div>
    <div>
      <van-row v-for="(item ,$index) in List" :key="$index" class="rowItem">
        <van-col :span="12">{{item.user_name}}</van-col>

        <van-col :span="12" class="textcenter">
          <button
            class="caobut"
            :class="item.sign_woker_date.length <= 0?'status4':'status1'"
            @click="workbut(item.user_id,1)"
            :disabled="item.sign_woker_date.length <= 0?false:true"
          >上班</button>
          <button
            class="caobut"
            :class="item.sign_leave_date.length <= 0&&item.sign_woker_date.length > 0?'status4':'status1'"
            :disabled="item.sign_leave_date.length <= 0&&item.sign_woker_date.length > 0?false:true"
            @click="workbut(item.user_id,2)"
          >下班</button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import CommonBar from "../common/commonBar";
import { mapState } from "vuex";
export default {
  components: {
    CommonBar
  },
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  data() {
    return {
      options: {
        type: "icon",
        centerText: "考勤巡查",
        iconNname: "wap-home",
        lefttype: "left"
      },
      List: []
    };
  },

  mounted() {
    this.getLoadData();
  },
  methods: {
    //考核列表
    getLoadData() {
      this.$toast.loading({
        mask: true,
        message: "加载中...",
        duration: 5000
      });
      var params = {
        token: this.token
      };
      this.$http
        .get(`${this.$basePath}?service=App.Attendance.ListUserByHead&api=88`, {
          params: params
        })
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.List = res.data;
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    CheckInByHead(params) {
      this.$toast.loading({
        mask: true,
        message: "加载中...",
        duration: 5000
      });

      this.$http
        .get(`${this.$basePath}?service=App.Attendance.CheckInByHead&api=88`, {
          params: params
        })
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.getLoadData();
            this.$toast({ message: "操作成功" });
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    //上班打卡
    workbut(user_id, type) {
      console.log(user_id, type);
      var that = this;
      var geolocation = new BMap.Geolocation();
      // 开启SDK辅助定位
      geolocation.enableSDKLocation();
      geolocation.getCurrentPosition(function(r) {
        var latitude = String(r.point.lat);
        var longitude = String(r.point.lng);
        var params = {
          token: that.token,
          user_id: user_id,
          type: type,
          workplace: { lon: longitude, lat: latitude }
        };
        console.log(params);
        that.CheckInByHead(params);
      });
    }
  }
};
</script>
<style lang="less" scoped>
.CheckInByHead {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  .areacontent {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    p {
      margin: 0;
    }
    .title {
      width: 100px;
    }
    .dateselect {
      width: 100%;
      height: 35px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #eee;
      border-radius: 2px;
      padding: 0 10px 0 15px;
      box-sizing: border-box;
      .arrowDown {
        font-size: 16px;
      }
    }
  }
  .countScoreHeader {
    padding: 0 15px;
    box-sizing: border-box;
    background: #eee;
    height: 40px;
    line-height: 40px;
  }
  .textcenter {
    display: flex;
    justify-content: center;
  }
  .textright {
    display: flex;
    justify-content: flex-end;
  }
  .rowItem {
    height: 40px;
    align-items: center;
    display: flex;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .rowItem:nth-child(even) {
    background: #f5f5f5;
  }
  .caobut {
    width: 75px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin: 0;
    color: #fff;
    font-size: 14px;
    outline: none;
    border: none;
    margin-right: 15px;
  }
  .status1 {
    background: #c8c8c8;
  }

  .status4 {
    background: #0ad591;
  }
}
</style>